import "./index.scss";
import { defineComponent, ref, KeepAlive } from "vue";
import { PxIcon } from "px-ui";
import { ArrowUp, ArrowDown } from "@px-ui/icons-vue";
import ReCollapseTransition from "@/components/ReCollapseTransition";

const props = {
  title: {
    type: String,
    default: ""
  }
};

const emits = ["visibleChange"];

export default defineComponent({
  name: "ReCollapse",
  props,
  emits,
  setup({ title }, { slots, emit }) {
    const isShow = ref<boolean>(true);
    const clickHandler = () => {
      isShow.value = !isShow.value;
      emit("visibleChange", isShow.value);
    };
    return () => {
      return (
        <div class="re-collapse">
          <div class="re-collapse-title">
            <div class="re-collapse-title-label" onClick={clickHandler}>
              <span class="label-text">{title}</span>
              <PxIcon>{isShow.value ? <ArrowDown /> : <ArrowUp />}</PxIcon>
            </div>
            {slots?.title ? <div class="re-collapse-title-slot">{slots?.title?.()}</div> : null}
          </div>
          <div class="re-collapse-content">
            <ReCollapseTransition>
              {slots?.default && isShow.value && (
                <KeepAlive>
                  <div class="re-collapse-content-slot">{isShow.value ? slots?.default() : null}</div>
                </KeepAlive>
              )}
            </ReCollapseTransition>
          </div>
        </div>
      );
    };
  }
});
